<template>
  <div class="map-nav">
    <el-menu
      :ellipsis="false"
      class="el-menu-popper-demo"
      mode="horizontal"
      :popper-offset="16"
    >
      <div class="logo" @click="flyToCenter">
        光
        <img src="../assets/images/定位.png" alt="" />
        谷
      </div>
      <slot></slot>

    </el-menu>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
let map = null;
onMounted(() => {
  map = proxy.$map;
});
/* 点击logo,飞行到中心点 */
const flyToCenter = () => {
  let center = [114.36, 30.5];
  map.getView().animate({
    center,
    zoom: 13.1,
    duration: 2000,
  });
};
</script>

<style scoped>
:global(.map-nav) {
  --el-menu-bg-color: #409eff;
  --el-menu-active-color: #fff;
}
.el-menu {
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 200;
  align-items: center;
  user-select: none;
  border:none;
  /* background: #6296ff; */
}
/* 深度选择器样式才生效 */
:deep(.el-menu--horizontal .el-menu-item) {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  height: inherit;
}
:deep(.el-menu--horizontal .el-menu-item):hover {
  color: #409eff;
  background: #fff;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title) {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title):hover {
  color: #409eff;
  background: #fff;
}
:deep(.el-menu--horizontal > .el-menu-item.is-active) {
  border-bottom: 3px solid var(--el-menu-active-color);
  color: #fff !important;
  background: #409eff;
}
.logo {
  display: flex;
  margin: 0 20px;
  line-height: 36px;
  font-size: 24px;
  font-weight: 900;
  font-family: serif;
  cursor: pointer;
  color: #fff;
  text-shadow: 2px 2px 4px #ff0000;
}
img {
  width: 34px;
  height: 34px;
}
</style>
